<template>
  <div class="app-container">
    <!-- banner and search -->
    <div>
      <!--滚动 search-->
      <div class="search df-c" v-if="isTranstion">
        <div class="df mr10" style="align-items: center;" @click.stop="replaceAddress">
          <div class="search-map"></div>
          <div class="fs14 c3A4761 df of">
            <span class="dot">{{ addrName || "暂无定位" }}</span>
          </div>
          <div class="triangle"></div>
          <div class="df1"></div>
        </div>
        <div class="df1" @click="openWebView('/search/home', 'h5')"></div>
        <div class="search-content df-c ubl_1px pl15" @click="openWebView('/search/home', 'h5')">
          <img src="./../assets/images/common/search@2x.png" class="search-wrap mr5" alt />
          <span class="fs14 theme-color">搜索</span>
        </div>
      </div>
      <!--未滚动搜索框-->
      <div class="search2 plr12 df ptb12" v-if="!isTranstion">
        <div class="df mr10 nearName" @click.stop="replaceAddress">
          <div class="search-map"></div>
          <div class="address ml3 df1 df of">
            <span class="dot">{{ addrName || "暂无定位" }}</span>
          </div>
          <div class="triangle"></div>
        </div>
        <div class="search-content" @click="openWebView('/search/home', 'h5')">
          <img src="../assets/images/indexNew/search_gray.png" class="search-wrap mr5" alt />
          <span class="search-btn">搜索</span>
        </div>
      </div>
    </div>
    <!--  -->
    <!-- <div class="df1 of-y-a"> -->
    <scroll-view class="df1" :scroll-y="true" style="height:100vh;" @scroll="handleScroll">
      <div>
        <!--轮播图 -->
        <div class="index-carsouel">
          <swiper indicator-dots="true" autoplay="true" interval="4000" style="height: 100%">
            <swiper-item v-for="(item, index) in listBanner" class="bannerswipe" :key="index">
              <img class="carsouel-img" :src="item.advContent" alt @click.stop="jumpUrl(item.href)" />
            </swiper-item>
          </swiper>
          <!--拼团悬浮窗-->
          <!-- <div class="collage" v-if="collageInfo.logo && isShowCollage" @click="jumpCollage">
              <div class="img-wrap">
                <img :src="collageInfo.logo" alt />
              </div>
              <div class="fs14 cFFF">
                {{ collageInfo.nickName }}
                {{ collageInfo.createDate }}秒前发起了拼团
              </div>
              <div class="right-white-arrow_ig"></div>
            </div> -->
        </div>

        <div class="main">
          <!--channel tab-->
          <div class="channel">
            <div class="channel-t">
              <div class="channel-t-l">
                <img class="t-l-img" src="../assets/images/indexNew/zp.png" alt="" />
                <span class="">正品保障</span>
              </div>
              <div class="channel-t-r" @click.stop="openWebView(`/search/list?isYuanYan=true`, 'h5')">
                <img class="channel-t-bg" src="../assets/images/indexNew/tabbar-bg.png" alt="" />
                <div class="df-c channel-t-content">
                  <img class="channel-t-r-img" src="../assets/images/indexNew/yy.png" alt="" />
                  <div class="channel-t-r-text">
                    <span>原研药专区</span>
                    <img src="../assets/images/indexNew/jt-r.png" alt="" />
                  </div>
                </div>
              </div>
            </div>
            <swiper class="channel-swiper-wrap" autoplay="false">
              <swiper-item v-for="(item, index) in channelList" :key="index">
                <channel-item :list="item"></channel-item>
              </swiper-item>
            </swiper>
          </div>
          <!-- 专区 -->
          <div class="special-zone" v-if="theme">
            <div class="special-l" v-if="theme.leftTheme" @click.stop="jumpUrl(theme.leftTheme.href)">
              <div class="tit">
                <div class="tit-l">{{ theme.leftTheme.title }}</div>
                <div class="tit-r">抢大额券</div>
              </div>
              <div class="tip">{{ theme.leftTheme.label }}</div>
              <div class="goods">
                <div class="item" v-for="(item, index) in theme.leftTheme.products" :key="index"
                  @click.stop="openWebView(`/goods/detail?id=${item.id}`, 'h5')">
                  <img :src="item.picUrl" alt="" />
                  <div class="item-r">
                    <div class="name">{{ item.productName }}</div>
                    <div class="price">
                      <span class="price-now"><span class="price-yuan">￥</span>{{ item.activityPriceYuan }}</span>
                      <span class="price-old">￥{{ item.priceYuan }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="special-r">
              <div class="special-r-t" v-if="theme.rightTopTheme">
                <div class="tit df-c" @click.stop="jumpUrl(theme.rightTopTheme.href)">
                  <div class="tit-l df1">{{ theme.rightTopTheme.title }}</div>
                  <div class="tit-r df-c">
                    更多<img src="../assets/images/indexNew/jt-r.png" />
                  </div>
                </div>
                <div class="goods">
                  <div class="item" v-for="(item, index) in theme.rightTopTheme.products" :key="index"
                    @click.stop="openWebView(`/goods/detail?id=${item.id}`, 'h5')">
                    <img :src="item.picUrl" alt="" />
                    <div class="name">
                      <span v-if="item.brandName">[<span class="tag">{{ item.brandName }}</span>]</span>{{
                        item.productName
                      }} {{ item.spec }}
                    </div>
                    <div class="price">
                      <span class="price-now"><span class="price-yuan">￥</span>{{ item.activityPriceYuan }}</span>
                      <span class="price-old">{{ item.priceYuan }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="special-r-b" v-if="theme.rightBottomTheme">
                <div class="tit" @click.stop="jumpUrl(theme.rightBottomTheme.href)">{{ theme.rightBottomTheme.title }}
                </div>
                <div class="tips">{{ theme.rightBottomTheme.label }}</div>
                <div class="btn-pic">
                  <div class="btn">
                    <span>即刻了解</span>
                    <img class="jt" src="../assets/images/indexNew/jt-white.png" alt="" />
                  </div>
                  <img class="pic" src="../assets/images/indexNew/global.png" alt="" />
                </div>
              </div>
            </div>
          </div>
          <!-- 限时抢购 -->
          <div class="special-time" @click.stop="openWebView(`/activity/secKill`, 'h5')">
            <div class="head">
              <div class="head-l">
                <img class="icon" src="../assets/images/indexNew/xstj.png" />
                <div class="countdown">
                  <div class="text">距结束</div>
                  <div class="time">
                    <!-- 小时 -->
                    <div class="time-group">
                      <span class="digit" v-for="(digit, index) in hours" :key="index">{{ digit }}</span>
                    </div>

                    <span class="separator">:</span>

                    <!-- 分钟 -->
                    <div class="time-group">
                      <span class="digit" v-for="(digit, index) in minutes" :key="index">{{ digit }}</span>
                    </div>

                    <span class="separator">:</span>

                    <!-- 秒 -->
                    <div class="time-group">
                      <span class="digit" v-for="(digit, index) in seconds" :key="index">{{ digit }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="head-r">
                <div>更多</div>
                <img class="rt" src="../assets/images/indexNew/jt-r.png" alt="" />
              </div>
            </div>
            <div class="goods">
              <div class="item" v-for="(item, index) in secKill" :key="index"
                @click.stop="openWebView(`/goods/detail?id=${item.id}`, 'h5')">
                <img :src="item.picUrl" alt="" />
                <div class="name line-clamp1">
                  {{ item.productName }}
                </div>
                <div class="price">
                  <div class="price-box">
                    <span class="price-yuan">￥</span>
                    <span class="price-num">{{ item.activityPriceYuan }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 精选品牌 -->
          <div class="brands">
            <div class="brands-l" @click="openWebView(`/brand/index?id=${pageId}`, 'h5')">
              <div>精选</div>
              <div>品牌</div>
              <div class="more">
                <span>查看更多</span>
                <img class="rt" src="../assets/images/indexNew/jt-r.png" alt="" />
              </div>
            </div>
            <div class="brands-r">
              <div class="item" v-for="(item, index) in brand" :key="index"
                @click="openWebView(`/search/list?pageName=${encodeURIComponent(item.name)}&brandId=${item.id}`, 'h5')">
                <img :src="item.pic" alt="" />
                <div class="line-clamp1">{{ item.name }}</div>
              </div>
            </div>
          </div>
          <!-- 瀑布流 橱窗和专区商品 -->
          <div class="waterfall-flow-wrap">
            <!-- 左列 -->
            <div class="flow-item">
              <div class="flow-item-wrap" v-for="(item, index) in leftFlowList" :id="'flowItemWrap' + 2 * index"
                :key="index" :class="{ visibles: isVisiblity }">
                <!-- 普通商品 -->
                <home-product-item v-if="item.type == 1" :info="item"></home-product-item>
                <!-- 橱窗 -->
                <show-case-item v-if="item.type != 1" :info="item"></show-case-item>
              </div>
            </div>
            <!-- 右列 -->
            <div class="flow-item flow-item-right">
              <div class="flow-item-wrap" v-for="(ritem, rindex) in rightFlowList" :id="'flowItemWrap' + (2 * rindex + 1)"
                :key="rindex" :class="{ visibles: isVisiblity }">
                <!-- 普通商品 -->
                <home-product-item v-if="ritem.type == 1" :info="ritem"></home-product-item>
                <!-- 橱窗 -->
                <show-case-item v-if="ritem.type != 1" :info="ritem"></show-case-item>
              </div>
            </div>
          </div>
        </div>
      </div>
    </scroll-view>
    <!-- </div> -->
    <!-- 没有引用的图片不会打包进去 -->
    <div v-show="false">
      <img src="./../assets/images/home/selected_home.png" alt="">
      <img src="./../assets/images/home/no_selected_home.png" alt="">
      <img src="./../assets/images/home/selected_classify.png" alt="">
      <img src="./../assets/images/home/no_selected_classify.png" alt="">
      <img src="./../assets/images/home/selected_my.png" alt="">
      <img src="./../assets/images/home/no_selected_my.png" alt="">
      <img src="./../assets/images/home/selected_shopCar.png" alt="">
      <img src="./../assets/images/home/no_selected_shopCar.png" alt="">
    </div>
  </div>
</template>
<style scoped lang="scss" rel="stylesheet/scss">
.app-container {
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;

  .search {
    position: fixed;
    top: 86px;
    z-index: 99;
    left: 13px;
    width: calc(100% - 26px);
    height: 36px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 25px 0 rgba(230, 234, 241, 1);
    border-radius: 24px;

    .search-content {
      /*width: 70px;*/
      /*height: 32px;*/
      background: #ffffff;
      border-radius: 100px;
      padding: 0 20px 0 14px;

      .search-wrap {
        width: 24px;
        height: 24px;
        /*margin-top: 3px;*/
      }
    }

    .search-map {
      width: 22px;
      height: 22px;
      margin: 0 8px 0 18px;
      background: url("./../assets/images/common/location_big@2x.png") no-repeat center;
      background-size: 100%;
    }

    .search-wrap {
      width: 24px;
      height: 24px;
      /*margin-top: 3px;*/
    }

    .triangle {
      width: 14px;
      height: 14px;
      /*margin-left: 3px;*/
      background: url("./../assets/images/common/arrow_right-gray@2x.png") no-repeat center center;
      background-size: 100%;
    }

    .delivery {
      min-width: 60px;
    }
  }

  .search2 {
    position: fixed;
    top: 76px;
    z-index: 2;
    /*height: 24px;*/
    width: calc(100% - 24px);

    .nearName {
      height: 32px;
      padding: 0 13px 0 10px;
      align-items: center;
      border-radius: 100px;
      margin-right: 46px;
      max-width: 100px;

      .search-map {
        width: 18px;
        height: 18px;
        background: url("./../assets/images/indexNew/v2_index_positioning.png") no-repeat center;
        background-size: 100%;
      }

      .address {
        font-size: 16px;
        color: #333333;
      }

      .triangle {
        width: 12px;
        height: 12px;
        margin-left: 3px;
        background: url("./../assets/images/indexNew/v2_sj.png") no-repeat center center;
        background-size: 100%;
      }
    }

    .search-content {
      flex: 1;
      height: 32px;
      background: #ffffff;
      border-radius: 100px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4px 4px 4px 8px;
      box-sizing: border-box;

      .search-wrap {
        width: 16px;
        height: 16px;
        /*margin-top: 3px;*/
      }

      .search-btn {
        width: 52px;
        height: 24px;
        background: #01cba9;
        border-radius: 16px;
        font-family: MILanPro_DEMIBOLD--GB1, MILanPro_DEMIBOLD--GB1;
        font-weight: normal;
        font-size: 14px;
        color: #ffffff;
        line-height: 14px;
        font-style: normal;
        line-height: 24px;
        text-align: center;
      }
    }

    .delivery {
      min-width: 70px;
    }

    .delivery-text {
      max-width: 102px;
    }
  }

  .index-carsouel {
    width: 100%;
    height: 256px;
    position: relative;

    .bannerswipe {
      background-color: #f4f4f4;

      .carsouel-img {
        width: 100%;
        height: 100%;
      }
    }

    .collage {
      position: absolute;
      bottom: 10px;
      left: 12px;
      height: 32px;
      background-color: rgba(0, 0, 0, 0.6);
      border-radius: 100px;
      display: flex;
      align-items: center;
      padding-right: 6px;

      .img-wrap {
        width: 30px;
        height: 30px;
        border-radius: 100%;
        overflow: hidden;
        margin-right: 3px;
        margin-left: 2px;
      }
    }
  }

  .main {
    padding: 8px;

    .channel {
      position: relative;
      background: #ffffff;
      border-radius: 12px;
      margin-bottom: 12px;

      .channel-t {
        display: flex;
        align-items: center;
        // margin-bottom: 18px;

        .channel-t-l {
          flex: 1;
          display: flex;
          align-items: center;

          .t-l-img {
            width: 20px;
            height: 20px;
            margin-right: 2px;
          }

          span {
            font-weight: 700;
            font-size: 20px;
            color: #333333;
            line-height: 26px;
            font-style: normal;
          }
        }

        .channel-t-r {
          display: flex;
          align-items: center;
          position: relative;
          width: 162px;
          height: 42px;

          .channel-t-bg {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
          }

          .channel-t-content {
            position: absolute;
            top: 2px;
            right: 12px;
            z-index: 3;

            .channel-t-r-img {
              width: 26px;
              height: 26px;
              margin-right: 10px;
            }

            .channel-t-r-text {
              font-family: MILanPro--GB1, MILanPro--GB1;
              font-weight: normal;
              font-size: 12px;
              color: #555555;
              line-height: 16px;
              text-align: justify;
              font-style: normal;
              display: flex;
              align-items: center;

              img {
                width: 8px;
                height: 8px;
                margin-left: 2px;
              }
            }
          }
        }
      }

      .channel-swiper-wrap {
        height: 170px;
        border-radius: 4px;
      }
    }

    .special-zone {
      display: flex;
      justify-content: space-between;

      .special-l {
        width: 176px;
        height: 289px;
        background: linear-gradient(180deg, #e9f4fe 0%, #ffffff 100%);
        border-radius: 12px;
        border: 1px solid #fff;
        // border-image: linear-gradient(180deg,
        //     rgba(255, 255, 255, 1),
        //     rgba(255, 255, 255, 0)) 0.05 0.05;

        .tit {
          display: flex;
          align-items: center;
          margin-bottom: 6px;
          margin-top: 16px;
          margin-left: 13px;

          .tit-l {
            font-family: MILanPro_DEMIBOLD--GB1, MILanPro_DEMIBOLD--GB1;
            font-size: 18px;
            color: #333333;
            line-height: 24px;
            margin-right: 8px;
          }

          .tit-r {
            width: 56px;
            height: 20px;
            background: linear-gradient(112deg, #fd6272 0%, #f73131 100%);
            border-radius: 6px;
            font-family: MILanPro_DEMIBOLD--GB1, MILanPro_DEMIBOLD--GB1;
            font-size: 12px;
            color: #ffffff;
            line-height: 16px;
            text-align: center;
            line-height: 20px;
          }
        }

        .tip {
          font-family: MILanPro--GB1, MILanPro--GB1;
          font-size: 12px;
          color: #666666;
          line-height: 16px;
          margin-left: 13px;
          margin-bottom: 8px;
        }

        .goods {
          background: #ffffff;
          border-radius: 12px;
          width: 176px;
          height: 216px;
          padding: 14px 8px 0;
          box-sizing: border-box;
          overflow: hidden;

          .item {
            display: flex;
            margin-bottom: 12px;

            img {
              width: 55px;
              height: 55px;
              margin-right: 4px;
            }

            .item-r {
              .name {
                font-family: MILanPro--GB1, MILanPro--GB1;
                font-size: 12px;
                color: #333333;

                //一行溢出显示点
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 100px;
              }

              .price {
                position: relative;
                background: url("./../assets/images/indexNew/price-bg.png") no-repeat center center;
                background-size: contain;
                width: 100px;
                height: 30px;

                .price-now {
                  position: absolute;
                  font-family: MILanPro--GB1, MILanPro--GB1;
                  font-size: 14px;
                  color: #f51249;
                  right: 10px;
                  top: 4rpx;

                  .price-yuan {
                    font-size: 12px;
                  }
                }

                .price-old {
                  position: absolute;
                  font-family: MILanPro--GB1, MILanPro--GB1;
                  font-size: 10px;
                  color: #999999;
                  bottom: -1px;
                  left: 0;
                }
              }
            }
          }
        }
      }

      .special-r {
        .special-r-t {
          width: 174px;
          height: 142px;
          background: linear-gradient(168deg, #fef7ef 0%, #ffffff 100%);
          border-radius: 12px;
          border: 1px solid #fff;
          // border-image: linear-gradient(180deg,
          //     rgba(255, 255, 255, 1),
          //     rgba(255, 255, 255, 0)) 0.05 0.05;
          margin-bottom: 6px;
          padding: 12px;
          box-sizing: border-box;

          .tit {
            display: flex;
            justify-content: space-between;
            margin-bottom: 4px;

            .tit-l {
              font-family: MILanPro_SEMIBOLD--GB1, MILanPro_SEMIBOLD--GB1;
              font-size: 16px;
              color: #333333;
            }

            .tit-r {
              font-family: MILanPro--GB1, MILanPro--GB1;
              font-size: 12px;
              color: #999999;

              img {
                width: 8px;
                height: 8px;
              }
            }
          }

          .goods {
            display: flex;
            justify-content: space-between;

            .item {
              background-color: #fff;

              img {
                width: 100%;
                height: 54px;
              }

              .name {
                font-family: MILanPro--GB1, MILanPro--GB1;
                font-size: 14px;
                color: #333333;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 72px;

                .tag {
                  color: #e39429;
                }
              }

              .price {
                display: flex;
                align-items: baseline;

                .price-now {
                  font-family: MILanPro_SEMIBOLD--GB1, MILanPro_SEMIBOLD--GB1;
                  font-size: 12px;
                  color: #ff1818;
                  font-weight: 800;

                  .price-yuan {
                    font-size: 8px;
                  }
                }

                .price-old {
                  font-family: MILanPro--GB1, MILanPro--GB1;
                  font-size: 8px;
                  color: #999999;
                  text-decoration-line: line-through;
                }
              }
            }
          }
        }

        .special-r-b {
          width: 174px;
          height: 142px;
          background: linear-gradient(180deg, #ebfff7 0%, #ffffff 100%);
          border-radius: 12px;
          border: 1px solid #fff;
          // border-image: linear-gradient(180deg,
          //     rgba(255, 255, 255, 1),
          //     rgba(255, 255, 255, 0)) 0.05 0.05;
          padding: 12px 8px;
          box-sizing: border-box;

          .tit {
            font-family: MILanPro_DEMIBOLD--GB1, MILanPro_DEMIBOLD--GB1;
            font-size: 18px;
            color: #333333;
            line-height: 24px;
            margin-bottom: 6px;
          }

          .tips {
            font-family: MILanPro--GB1, MILanPro--GB1;
            font-size: 12px;
            color: #666666;
            line-height: 16px;
            margin-bottom: 8px;
          }

          .btn-pic {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .btn {
              background: linear-gradient(102deg, #7cd4a5 0%, #37dc7e 100%);
              border-radius: 10px;
              display: flex;
              width: 75px;
              height: 20px;
              font-family: MILanPro--GB1, MILanPro--GB1;
              font-weight: normal;
              font-size: 12px;
              color: #ffffff;
              line-height: 16px;
              text-align: justify;
              font-style: normal;
              align-items: center;
              justify-content: center;

              .jt {
                width: 10px;
                height: 10px;
              }
            }

            .pic {
              width: 52px;
              height: 62px;
            }
          }


        }
      }
    }

    .special-time {
      height: 208px;
      background: linear-gradient(180deg, #ffebed 0%, #fdf8ff 100%);
      border-radius: 6px;
      border: 1px solid #ffffff;
      padding: 12px 8px;
      box-sizing: border-box;
      margin-bottom: 12px;
      margin-top: 8px;

      .head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 6px;

        .head-l {
          display: flex;
          align-items: center;

          .icon {
            width: 70px;
            height: 22px;
            margin-right: 4px;
          }

          .countdown {
            display: flex;
            align-items: center;

            .text {
              font-family: MILanPro--GB1, MILanPro--GB1;
              font-weight: normal;
              font-size: 12px;
              color: #aaaaaa;
              line-height: 16px;
              text-align: justify;
              font-style: normal;
              margin-right: 6px;
            }

            .time {
              display: flex;
              align-items: center;
              font-weight: bold;
              color: #333;
              border-radius: 12px;

              .time-group {
                display: flex;
                align-items: center;
              }

              .digit {
                display: inline-flex;
                justify-content: center;
                align-items: center;
                width: 14px;
                height: 18px;
                margin: 0 2px;
                color: white;
                font-size: 12px;
                background: linear-gradient(180deg, #ff5e5a 0%, #ff5e82 100%);
                border-radius: 2px;
              }

              .unit {
                margin-left: 10px;
                font-size: 20px;
                color: #666;
              }

              .separator {
                margin: 0 4px;
                color: #ab2426;
              }
            }
          }
        }

        .head-r {
          display: flex;
          align-items: center;
          font-family: MILanPro--GB1, MILanPro--GB1;
          font-size: 12px;
          color: #aaaaaa;
          line-height: 16px;

          .rt {
            width: 8px;
            height: 8px;
            margin-left: 2px;
          }
        }
      }

      .goods {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        // -webkit-overflow-scrolling: touch;
        width: 100%;

        &::-webkit-scrollbar {
          display: none;
        }

        .item {
          flex-shrink: 0;
          width: 110px;
          height: 156px;
          background: #ffffff;
          border-radius: 8px;
          margin-right: 6px;
          overflow: hidden;

          &:last-child {
            margin-right: 0;
          }

          img {
            width: 100%;
            height: 92px;
          }

          .name {
            margin: 8px;
            font-family: MILanPro--GB1, MILanPro--GB1;
            font-size: 14px;
            line-height: 18px;
            color: #333333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            .tag {
              color: #e39429;
            }
          }

          .price {
            height: 20px;
            border-radius: 10px;
            background: url("./../assets/images/indexNew/ms.png") no-repeat;
            background-size: contain;
            background-position: center;
            font-family: MILanPro--GB1, MILanPro--GB1;
            font-weight: normal;
            font-size: 10px;
            color: #ffffff;
            line-height: 13px;
            text-align: justify;
            font-style: normal;
            position: relative;

            .price-box {
              position: absolute;
              left: 46px;
              top: 4px;

              .price-num {
                font-size: 14px;
              }

              .price-yuan {
                font-size: 10px;
              }
            }

          }
        }
      }
    }

    .brands {
      display: flex;
      width: 360px;
      height: 100px;
      // background: linear-gradient(180deg, #edfff8 0%, #f6fffb 100%);
      background: url("./../assets/images/indexNew/ppbg.png") no-repeat;
      background-size: cover;
      border-radius: 12px;
      border: 1px solid #fff;
      // border-image: linear-gradient(180deg,
      //     rgba(255, 255, 255, 1),
      //     rgba(255, 255, 255, 0)) 0.05 0.05;

      .brands-l {
        font-family: MILanPro_DEMIBOLD--GB1, MILanPro_DEMIBOLD--GB1;
        font-weight: normal;
        font-size: 18px;
        color: #222222;
        line-height: 24px;
        font-style: normal;
        padding: 12px 8px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;

        .more {
          width: 64px;
          height: 16px;
          background: linear-gradient(180deg, #fffaeb 0%, #ffd79c 100%);
          border-radius: 6px 0 6px 0;
          display: flex;
          align-items: center;
          font-family: MILanPro--GB1, MILanPro--GB1;
          font-weight: normal;
          font-size: 12px;
          color: #aaaaaa;
          line-height: 12px;
          text-align: justify;
          font-style: normal;
          justify-content: center;
          margin-top: 2px;

          img {
            width: 4px;
            height: 8px;
          }
        }
      }

      .brands-r {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        // -webkit-overflow-scrolling: touch;

        &::-webkit-scrollbar {
          display: none;
        }

        .item {
          display: flex;
          align-items: center;
          flex-direction: column;
          font-family: MILanPro_SEMIBOLD--GB1, MILanPro_SEMIBOLD--GB1;
          font-weight: normal;
          font-size: 12px;
          color: #333333;
          line-height: 16px;
          font-style: normal;
          margin-right: 8px;

          img {
            width: 60px;
            height: 54px;
            background: #ffffff;
            box-shadow: 0 2px 4px 0 rgba(232, 232, 232, 0.5);
            border-radius: 8px;
            margin-bottom: 10px;
          }
        }
      }
    }

    .waterfall-flow-wrap {
      display: flex;
      flex-direction: row;
      margin-top: 12px;
      overflow: hidden;

      /* 使容器中的项目对齐开始位置 */
      .flow-item {
        flex: 0 0 178px;
        margin-right: 4px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        &.flow-item-right {
          margin-right: 0;
        }

        .flow-item-wrap {
          margin-bottom: 8px;
          border-radius: 12px;
          background: #fff;
          box-sizing: border-box;
          overflow: hidden;
          visibility: hidden;
        }

        .visibles {
          visibility: visible;
        }

      }
    }
  }
}
</style>



<script>
import { mapGetters, mapActions } from 'vuex'
import goShare from '@/mixins/goShare'
import Popup from '@/components/common/Popup.vue'
import ScrollBar from '@/components/common/ScrollBar.vue';
import env from '@/js/env.js';
// import ShowCaseItem from "@/components/mall/ShowCaseItem"
import VProductItem from "@/components/mall/VProductItem"
import HProductItem from "@/components/mall/HProductItem"
import HomeProductItem from "@/components/mall/HomeProductItem"
import ChannelItem from "@/components/mall/ChannelItem";
import ShowCaseItem from '@/components/mall/ShowCaseItem.vue';
export default {
  mixins: [goShare],
  data() {
    return {
      leftFlowList: [],// 瀑布流样式
      rightFlowList: [],// 瀑布流样式
      waterfalls: [],
      isVisiblity: false, // 是否显示
      theme: {},
      brand: [],
      listBanner: [],
      channelList: [],
      floorList: [],
      shopList: {},
      activityList: null,
      secKill: "",
      couponUrl: "",
      seckillScroll: null,
      isNeedRefresh: false,
      scrollY: 0,
      hasCouponActivity: false,
      //  倒计时
      tabList: [
        { id: 1, name: "0:00", time: 0 },
        { id: 3, name: "8:00", time: 8 },
        { id: 4, name: "12:00", time: 12 },
        { id: 5, name: "16:00", time: 16 },
        { id: 6, name: "20:00", time: 20 }
      ],
      selectionList: [], //壹树甄选列表
      currentTime: "",
      currentIndex: 0,
      downTimeInterval: "",
      collageTimer: "",
      collageDownTimer: "",
      collageInfo: {},
      cancelObj: {},
      isShowCollage: true,
      isTranstion: false,
      shareInfo: {},
      shareShow: true,
      current: 3,
      couponUrlHerf: "",



      options: {},
      baseInfo: {},
      floor: [],          //  楼层
      cancelObj: {},
      // pointsGoods: [],    //  积分商品
      // couponsList: [],    //  展示出来的优惠券
      // allCouponsList: [], //  待展示出来的优惠券
      signPopupShow: false,
      vipCardPopupShow: true,
      // couponsListCancelObj: {},
      // pointsGoodsListCancelObj: {},
      loadingUserIndexFirst: true,    //  是否第一次加载用户基础信息
      // vipCard:{},
      // area:'',
      drawPopupShow: false,
      isLive: false,
      isECoin: "",
      isIntegral: "",
      // showJson: undefined,
      isWm: "",
      isYht: "",
      programWindowList: [], // 抽奖弹框的轮播图
      isWxWork: wx.getSystemInfoSync().environment === 'wxwork',    //  是否是企业微信小程序
      sharePhone: '',
      employeeType: 0,
      again: 0,
      isShenYang: true,
      vichyShow: true,
      flashSale: false, // 限时抢购显隐
      myService: [],
      activityModule: [], // 活动板块
      scroll: '',
      secKillList: [], // 限时抢购的活动商品
      //  倒计时
      tabList: [
        { id: 1, name: '0:00', time: 0, },
        { id: 3, name: '8:00', time: 8, },
        { id: 4, name: "12:00", time: 12, },
        { id: 5, name: '16:00', time: 16, },
        { id: 6, name: '20:00', time: 20, },
      ],
      downTimeInterval: '',
      hours: '',
      minutes: '',
      seconds: '',
      currentTime: '',
      newBarWidth: [],
      newScrollHeight: 150,
      scrollIndex: 0,
      pageId: '',
    }
  },

  components: {
    Popup,
    ScrollBar,
    VProductItem,
    HProductItem,
    HomeProductItem,
    ChannelItem,
    ShowCaseItem,
  },
  computed: {
    ...mapGetters(['location', 'scopeId', 'storeId', 'storeName', 'locationCopy', 'wxID', 'nearestChain', 'userInfo', 'sharePageUrl', 'shareUrl', 'openId', 'cardDepartId', 'locationDetailInfo', 'addrName', 'showIndexPopup']),

    store() {
      return this.nearestChain
    },
    showMain() {     //  是否显示界面
      if (this.scopeId && this.openId) {
        return true
      }
      return false
    },
    phone() {
      if (this.userInfo && this.userInfo.phone) {
        this.updateAppSetting({
          userPhone: this.userInfo.phone
        })
        return this.$utils.secretMobile(this.userInfo.phone)
      }
      return ''
    },
  },

  watch: {
    'baseInfo.cardCount'(newVal, oldVal) {
      this.vipCardPopupShow = this.baseInfo.cardCount ? true : false
    },
    locationCopy(newVal, oldVal) {
      this.getUserIndex()
      console.log('locationCopy 的 newVal,oldVal：', newVal, oldVal)
      if (newVal && oldVal != newVal) {
        this.getHomePage();
        this.login().then(data => {
          this.goShareCondition('index')
          this.getVipCardList()
        }, err => { })
      }
    },
    userInfo(newVal, oldVal) {
      if (newVal && !oldVal) {    //  getUserIndex会更新 userInfo， 因为查看会员码用到userNo
        this.getUserIndex()
        this.isShenyangCity()
        console.log('拿取地理位置');
      }
    },
    addrName() {
      this.getUserIndex();
      // this.getHomePage();
    },
    'baseInfo.storeId'() {
      wx.setStorageSync('isWm', 'false');
      this.isWm = false;
      wx.setStorageSync('isYht', 'false');
      this.isYht = false;
      if (this.baseInfo.storeId == '4767') { //万民：4767
        wx.setNavigationBarColor({
          backgroundColor: '#f39700',
          frontColor: '#ffffff'
        });
        wx.setNavigationBarTitle({
          title: '山西万民',
        });
        wx.setBackgroundColor({
          backgroundColor: '#f39700'
        });
        wx.setStorageSync('isWm', 'true')
        this.isWm = true;
      }
      if (this.baseInfo.storeId == '4776') { //养和堂：4776
        wx.setNavigationBarColor({
          backgroundColor: '#159547',
          frontColor: '#ffffff'
        });
        wx.setNavigationBarTitle({
          title: '养和堂',
        });
        wx.setBackgroundColor({
          backgroundColor: '#159547'
        });
        wx.setStorageSync('isYht', 'true')
        this.isYht = true;
      }
      if (this.baseInfo.storeId != '4776' && this.baseInfo.storeId != '4767') {
        wx.setNavigationBarColor({
          backgroundColor: '#287C59',
          frontColor: '#ffffff'
        });
        wx.setNavigationBarTitle({
          title: '壹药臻选',
        });
        wx.setBackgroundColor({
          backgroundColor: '#287C59'
        })
      }
      console.log("isWm is " + this.isWm);
      console.log("isYht is " + this.isYht)
    },
  },

  methods: {
    ...mapActions(['updateAppSetting', 'loadShareUrl', 'login', 'openRouteByWebview', 'openLiveByWebview', 'openHealthRouteByWebview', 'openBrandByWebview']),
    handleScroll(e) {
      const scrollTop = e.target.scrollTop;
      if (scrollTop < 145) {
        this.isTranstion = false;
      } else {
        this.isTranstion = true; // 滚动样式
      }
      // console.log("handleScroll", e, scrollTop)
    },
    dev() {
      wx.showToast({
        title: '开发中，敬请期待！',
        icon: 'none',
        duration: 2000
      })
    },
    seckillScroll2(e) {
      // console.log('seckillScroll2', e)
      const scrollLeft = e.target.scrollLeft;
      const scrollWidth = e.target.scrollWidth; // 可滚动的距离
      const windowWidth = wx.getSystemInfoSync().windowWidth;
      this.newBarWidth[this.scrollIndex] = (scrollLeft / (scrollWidth - windowWidth - 26)) * 40 + 'px';
    },
    scrollClick(i) {
      this.scrollIndex = i
    },

    jumpUrl(href) {
      if (!href) {
        return
      }
      console.log(href, "href");
      if (href.indexOf(this.$env.backUrlBase) > -1) {
        href = href.split('#')[1];
      }

      this.openRouteByWebview({
        route: this.encodeChineseInUrl(href),
        jumpType: 'push',
        sendLocation: true
      })
      return;
    },
    encodeChineseInUrl(url) {
      return url.replace(/([?&]pageName=)([^&]+)/g, function (match, p1, p2) {
        // p1是"pageName="，p2是参数值
        return p1 + encodeURIComponent(p2);
      });
    },
    /**
     * 前往webview
     * @param route：路径
     * @param type：类型 healthWX健康社区 page原生页面 mall商城
     */
    openWebView(route, type = 'mall') {
      console.log('openWebView route：', route, type);
      // 原来有的逻辑
      if (this.drawPopupShow) {
        this.drawPopupShow = false
        this.updateAppSetting({
          showIndexPopup: 1
        })
      }
      // 获取区域公司
      let companyStr = this.$const.getAreaCompany(this.baseInfo.storeId)
      let routeArr = {
        '/index': '送药上门', // 健康社区&送药上门
        [`/brandMall/home?brandId=${this.baseInfo.brandId}`]: '薇姿品牌馆',
        '/goods/searchHome': '实时找药',
        '/chat/room': '用药咨询',
        '/chronic': '慢病管理',
        '/user/card/cardList': '卡包',
        '/pages/nearbyStore/list': '附近门店',
        '/pointsMall': '积分商城',
        '/pointsMall/draw': '积分抽奖',
        '/user/order/consumptionList': '消费记录',
        '/my/memberList': '健康档案',
        '/goods/drugDemandList': '我的需求',
        // 特病管理 目前无用
        '/specialDisease': '特病管理',
        // 直播活动没有地址
      }
      if (type == 'healthWX') {
        routeArr['/index'] = '健康社区'
      } else {
        routeArr['/index'] = '送药上门'
      }
      // 友盟埋点
      // this.$uma.trackEvent('serviceItem', {
      //   'name': routeArr[route],
      //   'chainName':this.nearestChain.chainName ||'',
      //   'chainId':this.nearestChain.id || '',
      //   'storeId':this.storeId,
      //   'storeName':this.storeName
      // })
      if (!this.scopeId || !this.openId) {
        return
      }
      if ((type == 'dzb' || type == 'healthWX') && this.baseInfo.storeId && !this.baseInfo.cardCount) {
        wx.showToast({
          title: '请先领取会员卡',
          icon: 'none',
          duration: 2000
        })
        return
      }
      if (!this.userInfo) {
        this.goLoginAction()
        return
      }
      if ((['/pointsMall'].includes(route) && this.baseInfo.integralFlag != 1) || (['/index'].includes(route) && this.baseInfo.medicineToDoorflag != 1 && type == 'h5')) {
        // console.log(this.cardDepartId,'pointsMall')
        wx.showToast({
          title: '此功能该区域正在建设中！',
          icon: 'none',
          duration: 2000
        })
        return
      }

      // type == h5, 跳转h5的页面
      if (type == 'h5') {
        this.openRouteByWebview({
          route: route,
          jumpType: 'push',
          sendLocation: true
        })
        return;
      }
      // type == brands, 跳转h5的品牌馆
      if (type == 'brands') {
        if (!this.baseInfo.brandId) {
          wx.showToast({
            title: '此功能该区域正在建设中！',
            icon: 'none',
            duration: 2000
          })
        } else {
          route = `/brandMall/home?brandId=${this.baseInfo.brandId}`
          this.openRouteByWebview({
            route: route,
            jumpType: 'push',
            sendLocation: true
          })
        }
        return;
      }
      // type == page, 原生页面
      if (type == 'page') {
        mpvue.navigateTo({
          url: route
        });
        return;
      }
      // type == more, 跳转tab页面
      if (type == 'more') {
        // 切换到导航栏页面
        wx.switchTab({
          url: route
        })
        return;
      }
      // type == healthWX, 健康社区
      if (type == 'healthWX') {
        if (!this.cardDepartId) {
          wx.showToast({
            title: '此功能该区域正在建设中！',
            icon: 'none',
            duration: 2000
          })
        } else {
          this.openHealthRouteByWebview({
            route: route,
            jumpType: 'push'
          })
        }
        return;
      }
      // type == live, 直播外链
      if (type == 'live') {
        wx.navigateToMiniProgram({
          appId: 'wx92d650b253f8f2e3',//小程序appid
          path: 'pages/index/index?zbid=1106745572',//跳转关联小程序app.json配置里面的地址
          extraData: {//需要传递给目标小程序的数据，目标小程序可在 App.onLaunch()，App.onShow() 中获取到这份数据。
            // zbid: '1106745572'
          },
          //**重点**要打开的小程序版本，有效值 develop（开发版），trial（体验版），release（正式版）
          envVersion: 'release',
          success(res) {
            // 打开成功
          }
        })
        return
      }
      if (type == 'mall' || !type) {
        this.openRouteByWebview({
          route: route,
          jumpType: 'push',
          sendLocation: true
        })
      }
    },
    jumpWebView(route) {
      if (!route) return;
      mpvue.navigateTo({
        url: `/pages/webview?route=${encodeURIComponent(route)}`
      })
    },
    jumpWeizan() {
      wx.navigateToMiniProgram({
        appId: 'wx92d650b253f8f2e3',//小程序appid
        path: 'pages/index/index?zbid=1106745572',//跳转关联小程序app.json配置里面的地址
        extraData: {//需要传递给目标小程序的数据，目标小程序可在 App.onLaunch()，App.onShow() 中获取到这份数据。
          // zbid: '1106745572'
        },
        //**重点**要打开的小程序版本，有效值 develop（开发版），trial（体验版），release（正式版）
        envVersion: 'release',
        success(res) {
          // 打开成功
        }
      })
    },
    // 前往登录
    goLoginAction() {
      wx.navigateTo({
        url: '/pages/register'
      })
    },
    getMyServices(list) {
      if (!list.length) {
        list = [
          { name: '送药上门', nameEn: 'h5_index', isShow: 1 },
          { name: '薇姿品牌馆', nameEn: 'brand_vichy', isShow: 1 },
          { name: '实时找药', nameEn: 'search_medicine', isShow: 1 },
          { name: '直播活动', nameEn: 'live', isShow: 1 },
          { name: '健康社区', nameEn: 'healthy_community', isShow: 1 },
          { name: '慢病管理', nameEn: 'slow_disease', isShow: 1 },
          { name: '用药咨询', nameEn: 'online_consulting', isShow: 1 },
          { name: '附近门店', nameEn: 'nearby_stores', isShow: 1 },
          { name: '积分商城', nameEn: 'integral_mall', isShow: 1 },
          { name: '积分抽奖', nameEn: 'integral_lottery', isShow: 1 },
          { name: '消费记录', nameEn: 'records_consumption', isShow: 1 },
          { name: '卡包', nameEn: 'card_package', isShow: 1 },
          { name: '健康档案', nameEn: 'health_management', isShow: 1 },
          { name: '我的需求', nameEn: 'my_need', isShow: 1 },
        ]
      }
      this.myService = [...list];
      return;
      const myServiceObj = {
        'h5_index': { imgSrc: require('../assets/images/home/home_mall.png'), url: '/index', type: 'h5' },
        'brand_vichy': { imgSrc: require('../assets/images/home/hoem_brand_vichy.png'), url: `/brandMall/home?brandId=${this.baseInfo.brandId}`, type: 'brands' },
        'search_medicine': { imgSrc: require('../assets/images/home/home_search_medicine.png'), url: '/goods/searchHome', type: 'h5' },
        'online_consulting': { imgSrc: require('../assets/images/home/home_online_consulting.png'), url: '/chat/room', type: '' },
        'healthy_community': { imgSrc: require('../assets/images/home/home_healthy_community.png'), url: '/index', type: 'healthWX' },
        'slow_disease': { imgSrc: require('../assets/images/home/home_slow_disease_management.png'), url: '/chronic', type: 'healthWX' },
        'live': { imgSrc: require('../assets/images/home/home_live.png'), url: '', type: 'live' },
        'card_package': { imgSrc: require('../assets/images/home/home_card_package.png'), url: '/user/card/cardList', type: '' },
        'nearby_stores': { imgSrc: require('../assets/images/home/home_nearby_stores.png'), url: '/pages/nearbyStore/list', type: 'page' },
        'integral_mall': { imgSrc: require('../assets/images/home/home_integral_mall.png'), url: '/pointsMall', type: 'h5' },
        'integral_lottery': { imgSrc: require('../assets/images/home/home_integral_lottery.png'), url: '/pointsMall/draw', type: 'h5' },
        'records_consumption': { imgSrc: require('../assets/images/home/home_records_consumption.png'), url: '/user/order/consumptionList', type: '' },
        'health_management': { imgSrc: require('../assets/images/home/home_health_management.png'), url: '/my/memberList', type: 'healthWX' },
        'my_need': { imgSrc: require('../assets/images/home/home_my_need.png'), url: '/goods/drugDemandList', type: 'h5' },
      }
      const myService = [];
      list.forEach(v => {
        if (v.isShow == 1) {
          v.imgSrc = myServiceObj[v.nameEn].imgSrc;
          v.url = myServiceObj[v.nameEn].url;
          v.type = myServiceObj[v.nameEn].type;
          myService.push(v);
        }
      });
      myService.push({ name: '更多', type: 15, imgSrc: require('../assets/images/home/home_more.png'), url: '/pages/user', type: 'more' });

      this.myService = myService;
    },
    getHomePage() {
      //  获取楼层
      this.getDownTime();
      this.getShopCarNum();
      this.secKillList = [];
      this.myService = [];
      this.activityModule = [];
      this.$api.getHomePage({
        scopeId: this.scopeId,
        storeId: this.storeId
      }).then(data => {
        // const brandFloor = {
        //   banner: {
        //     advList: [{
        //       advContent: 'http://mall.iot-tech.site/group1/M00/00/0C/wKgAgV8n2B6AfIndAANFjbxkaiw261.jpg'
        //     }],
        //     type: 'brand'
        //   }
        // }
        // this.floor = data.floor || []
        // this.bannerList = data.banner.advList || []; // 轮播图部分
        // if (this.addrName == '上海') {
        //   // this.floor.unshift(brandFloor)
        // }
        // console.log('getMyServices------------------', data)
        // this.getMyServices(data.channel || []);
        // this.getActivityModule(data.activityModule || []);
        // this.getSecKill(data.promotion || []);
        // 优惠券部分
        // this.couponUrl =
        //     res.data.eject.ejectInfo ||
        //     require("../assets/images/activity/couponIndex.png");
        //   if (res.data.eject.ejectInfo) {
        //     if (this.shouldShowPopup()) {
        //       this.hasCouponActivity = true;
        //     }
        //     this.couponUrlHerf = res.data.eject.ejectUrl;
        //   }
        console.log("首页数据", data)
        if (data.banner.advList.length > 0) {
          this.listBanner = data.banner.advList;
        }
        if (data.channel.length > 0) {
          this.channelList = this.getGroups(data.channel, 10);
          console.log(this.channelList, "  this.channelList");
        }
        //壹树甄选
        // if (res.data.hotProduct.length > 0) {
        //   this.selectionList = res.data.hotProduct;
        //   if (this.selectionList.length == 3) {
        //     [this.selectionList[0], this.selectionList[1]] = [
        //       this.selectionList[1],
        //       this.selectionList[0]
        //     ];
        //   }
        // }
        // if (res.data.floor.length > 0) {
        //   this.floorList = res.data.floor;
        // }
        if (data.promotion.length > 0) {
          this.secKill = data.promotion;
        }
        // 专区
        this.theme = data.theme || {};
        this.pageId = data.pageId
        //限时秒杀和组合套餐(固定)
        this.brand = data.brand || [];
        this.waterfalls = data.waterfalls || [];
        // 瀑布流
        this.getWaterFalls(data.waterfalls || [])

      }, err => {
        console.log('楼层获取失败', err)
      })
      this.isShenyangCity();
    },
    getGroups(items, size) {
      var result = [];

      for (let i = 0, len = items.length; i < len; i += size) {
        result.push(items.slice(i, i + size));
      }

      return result;
    },
    getWaterFalls(waterfalls) {
      const arrLeft = [];
      const arrRight = [];
      waterfalls.forEach((item, index) => {
        if (index % 2 == 0) {
          arrLeft.push(item);
        } else {
          arrRight.push(item);
        }
      })
      this.leftFlowList = [...arrLeft];
      this.rightFlowList = [...arrRight];

     
      setTimeout(() => {
        let heights = [];
        const query = wx.createSelectorQuery();
        query.selectAll('.flow-item-wrap').boundingClientRect(rects => {
          heights = rects || []
        });
        query.exec((res)=>{
        console.log(res,"res",heights)
        this.claFlex(heights)
        })
      }, 500);
    },
    claFlex(rect) {
      let arr1 = []; // 第一列的值
      let arr2 = []; // 第二列的值
      let heightArr1 = []; // 第一列的高度值
      let heightArr2 = []; // 第二的高度值
      let heights = rect; // 汇总

      heights.forEach((item,index)=>{
        if (index == 0) {
            heightArr1.push(item.height)
            arr1.push(this.waterfalls[index])
            return
          }
          if (index == 1) {
            heightArr2.push(item.height)
            arr2.push(this.waterfalls[index])
            return
          }
          // 计算其他选项
          const heightTotal1 = heightArr1.length ? Array.from(heightArr1).reduce((acc, cur) => acc + cur) : 0;
          const heightTotal2 = heightArr2.length ? Array.from(heightArr2).reduce((acc, cur) => acc + cur) : 0;
          let minNumber = Math.min(heightTotal1, heightTotal2);
          switch (minNumber) {
            case heightTotal1:
              heightArr1.push(item.height)
              arr1.push(this.waterfalls[index]);
              break;
            case heightTotal2:
              heightArr2.push(item.height)
              arr2.push(this.waterfalls[index]);
              break;
          }
      })
      this.leftFlowList = [...arr1];
      this.rightFlowList = [...arr2];

      setTimeout(() => {
        this.isVisiblity = true
      });
      return 
      // 执行所有查询
      this.waterfalls.forEach((item, index) => {
        const query = wx.createSelectorQuery();
        query.select(`#flowItemWrap${index}`).boundingClientRect((rect) => {
          if (rect) {
            heights.push(rect.height); // 更新数据
          }
        }).exec((res) => {
          console.log("height", heights)
          console.log(index, res)
         
        });
      })


      this.leftFlowList = [...arr1];
      this.rightFlowList = [...arr2];
    },
    getHeightArr(){
      
    },
    getUserIndex(a = 0) {
      // 切换地址前先隐藏弹窗
      if (!this.userInfo) {
        return
      }

      if (this.loadingUserIndexFirst) {
        wx.showLoading()
      }

      //  获取用户基本信息
      this.cancelObj.request && this.cancelObj.request.abort()
      // console.log(a)
      this.$api.userInfoIndex(this.cancelObj).then(data => {
        if (this.loadingUserIndexFirst) {
          wx.hideLoading()
        }
        this.vipCardPopupShow = true
        this.baseInfo = data || {}
        //品牌馆是否显示
        if (!this.baseInfo.brandId) {
          this.vichyShow = false
        } else {
          this.vichyShow = true
        }

        // 首页抽奖弹窗判断
        if (!this.programWindowList.length) {
          this.getProgramWindow();
        }

        this.updateAppSetting({
          cardDepartId: this.baseInfo.cardDepartId || '',
          userInfo: this.baseInfo.userInfo
        })
        this.loadingUserIndexFirst = false
        this.isECoin = this.baseInfo.isECoin
        this.isIntegral = this.baseInfo.isIntegral


      }, err => {
        if (this.loadingUserIndexFirst) {
          wx.hideLoading()
        }

        err.msg && wx.showModal({
          title: '基本信息获取提示',
          content: err.msg,
          success: (res) => { }
        })
      })
    },
    getSecKill(secKillList) {
      this.secKillList = secKillList;
    },
    getActivityModule(activityModule) {
      // 判断限时秒杀(flashSale)、预售专场(preSale)、领优惠券(coupons)、超值拼团(groupBuy)、组合套餐(package)的显隐
      if (!activityModule.length) {
        activityModule = [
          { nameEn: 'flashSale', isShow: 1 },
          { nameEn: 'preSale', isShow: 1 },
          { nameEn: 'coupons', isShow: 1 },
          { nameEn: 'groupBuy', isShow: 1 },
          { nameEn: 'package', isShow: 1 },
        ];
      }
      const activityModuleArr = [];
      const imgSrcObj = {
        'preSale': { imgSrc: require('../assets/images/home/activity_preSale.png'), goUrl: '/activity/preSale' },
        'coupons': { imgSrc: require('../assets/images/home/activity_coupons.png'), goUrl: '/activity/coupons' },
        'groupBuy': { imgSrc: require('../assets/images/home/activity_group.png'), goUrl: '/activity/collage' },
        'package': { imgSrc: require('../assets/images/home/activity_package.png'), goUrl: '/activity/package' },
      };
      activityModule.forEach((v) => {
        if (v.nameEn == 'flashSale') {
          if (v.isShow == 1) {
            this.flashSale = true;
          }
        } else {
          if (v.isShow == 1) {
            v.imgSrc = imgSrcObj[v.nameEn].imgSrc;
            v.goUrl = imgSrcObj[v.nameEn].goUrl;
            activityModuleArr.push(v);
          }
        }
      })
      // 不是双数就 -1 凑成双数
      if (activityModuleArr.length % 2 == 1) {
        activityModuleArr.length = activityModuleArr.length - 1;
      }
      this.activityModule = activityModuleArr;
    },
    // 获取购物车角标数字
    getShopCarNum() {
      this.$api.getShopCarNum().then(data => {
        if (data) {
          console.log('购物车数量：', data)
          wx.setTabBarBadge({
            index: 2,
            text: `${data}`,
          })
        }
      }, err => { })
    },
    //  活动倒计时
    getDownTime() {
      let currentHours = new Date().getHours();
      for (let i = 0; i < this.tabList.length; i++) {
        let time1 = this.tabList[i].time
        let time2 = this.tabList[i + 1] && this.tabList[i + 1].time
        if ((!time2 || currentHours < time2) && currentHours >= time1) {
          this.currentIndex = i
          this.currentTime = this.tabList[i].time;
        }
      }

      if (this.downTimeInterval) {
        clearInterval(this.downTimeInterval)
      }
      let end;
      if (this.currentIndex == 0) {
        end = new Date(this.time(8)).getTime()
      } else {
        end = new Date(this.time(4)).getTime()
      }

      this.downTimeInterval = setInterval(() => {
        let currentTime = new Date().getTime();
        if (currentTime > end) {
          return
        }
        let distance = end - currentTime;

        this.hours = this.splitTime(Math.floor(distance / (1000 * 60 * 60)))
        this.minutes = this.splitTime(Math.floor(distance / 1000 / 60 % 60))
        this.seconds = this.splitTime(Math.floor(distance / 1000 % 60))
      }, 1000)
    },
    // 时间处理
    time(distance = 0) {
      let currentTime = this.currentTime * 1 + distance
      if (currentTime < 10) {
        currentTime = "0" + currentTime
      }
      const ymd = new Date().toLocaleDateString();
      const hms = `${currentTime}:00:00`

      return `${ymd} ${hms}`
    },
    splitTime(num) {
      const str = num.toString().padStart(2, "0"); // 确保两位数
      return str.split(""); // 拆分为 ['1', '6'] 等
    },
    // 获取首页抽奖轮播弹框
    getProgramWindow() {
      const params = {
        storeId: this.baseInfo.storeId,
      }
      this.$api.getProgramWindow(params).then(data => {
        this.programWindowList = data.programWindowCode;
        if (this.programWindowList.length) {
          this.drawPopupShow = true;
        } else {
          this.drawPopupShow = false;
        }
      }, err => { console.log(err) })
    },
    // 更换位置
    replaceAddress() {
      let _this = this
      console.log('打开地图')

      wx.chooseLocation({
        success: res => {
          this.checkShowAddress = false
          wx.showLoading({
            title: '登录中'
          })
          console.log('this.location.latitude: ', this.location.latitude, 1)
          this.updateAppSetting({
            location: { latitude: res.latitude, longitude: res.longitude },
            locationDetailInfo: res,
            addrName: this.$const.getAreaStr(res.address),
          });
          // setTimeout(()=>{
          //   wx.hideLoading()
          // },1500)

          //沈阳市页面坑位显示与否
          let reg = /.+?(省|市|自治区|自治州|县|区)/g;
          let city = res.address.match(reg)
          if (city[1] == '沈阳市') {
            this.isShenYang = false
          } else {
            this.isShenYang = true
          }
        }
      });
    },
    // 关闭
    closeDrawPopup() {
      this.drawPopupShow = false
      this.updateAppSetting({
        showIndexPopup: 1
      })
    },
    getIsLive() {
      var that = this
      wx.request({
        url: env.apiBaseUrl + '/qvb.json',
        header: {
          'content-type': 'application/json' // 默认值
        },
        success(res) {
          that.isLive = res.data.qlvb
        }
      })
    },
    getWxWork() {
      if (this.isWxWork) {
        let that = this
        wx.qy.login({
          success: function (res) {
            console.log('企业微信code: ', res.code)
            if (res.code) {
              // 1.企业微信code换取手机号
              // 2.分享拼接企业微信code与渠道
              that.$api.getUserInfoByCode({
                code: res.code
              }).then(data => {
                that.sharePhone = data.mobile
                that.employeeType = 1
                that.updateAppSetting({
                  sharePhone: data.mobile,
                  employeeType: 1
                })
                if (res.data.code != 1 && that.again == 0 || that.again == 1) {
                  that.again++
                  that.getWxWork();
                }
              }, err => {
                if (that.again == 0 || that.again == 1) {
                  that.again++
                  that.getWxWork();
                }
              })
            }
          }
        });
      } else {
        this.updateAppSetting({
          employeeType: 0
        })
      }
    },
    getShare() {
      //获取分享人手机号与渠道
      console.log(this.options, "index页获取渠道")
      if (this.options.userPhone) {
        this.updateAppSetting({
          getUserSharePhone: this.options.userPhone,
          getEmployeeType: this.options.employeeType
        })
        let params = {
          phone: this.options.userPhone || "",
          employeeType: this.options.employeeType || ""
        }
        this.$api.bindEmployee(params).then(data => {
        }, err => { })
      }
    },
    isShenyangCity() {
      let reg = /.+?(省|市|自治区|自治州|县|区)/g;
      if (this.locationDetailInfo && this.locationDetailInfo.address) {
        let city = this.locationDetailInfo.address.match(reg)

        if (city[1] == '沈阳市') {
          this.isShenYang = false
        } else {
          this.isShenYang = true
        }
      }
    },

  },
  onLoad(options) {
    this.options = options
    this.updateAppSetting({
      indexOptions: options
    })

    this.loadShareUrl()
    this.getWxWork();
    //  每次重启首页都要重新登录
    // if (this.scopeId) {
    //   this.getHomePage();
    //   this.login().then(data => {
    //     this.goShareCondition('index')
    //   }, err => { });
    // }
    this.getShare();
  },
  onShow() {
    // todo 每次进入首页都要刷新数据（从onload->onshow)
    //  每次重启首页都要重新登录
    if (this.scopeId) {
      this.getHomePage();
      this.login().then(data => {
        this.goShareCondition('index')
      }, err => { });
    }
    // this.getUserIndex()
    this.getIsLive();
    this.newBarWidth = []
  },
  onHide() {
    this.cancelObj.request && this.cancelObj.request.abort()
  },
  //  转发设置
  onShareAppMessage() {
    let phone = this.sharePhone || this.userInfo.phone || ''
    console.log(this.sharePhone, this.employeeType, '首页转发企业渠道')
    console.log(this.userInfo.phone, this.employeeType, '首页转发普通渠道')
    return {
      title: '壹药臻选',
      desc: '',
      path: 'pages/index?userPhone=' + phone + '&employeeType=' + this.employeeType,
      success: () => { },
    }
  },
}
</script>
